<template>
    <el-dialog
      v-model="dialogVisible"
      :destroy-on-close="true"
      :align-center="true"
      width="50%"
      title="售后"
      style="padding: 20px"
    >
      <el-form
        ref="jobFormRef"
        :rules="rules"
        :model="dialogData.itemInfo"
        label-width="120px"
        label-suffix=" :"
      >
            <el-form-item label="异议类型">
              <el-select
                size="large"
                style="width: 100%"
                v-model="dialogData.itemInfo.applyType"
                placeholder="异议类型"
              >
                <el-option v-for="item in dialogData.abnormalTypes" :key="item.value" :label="item.label" :value="item.value" />
              </el-select>
            </el-form-item>
            <el-form-item label="标题" prop="title">
              <el-input v-model="dialogData.itemInfo.title" placeholder="标题"></el-input>
            </el-form-item>
            <el-form-item label="异议说明" prop="content">
              <el-input :rows="4" type="textarea" v-model="dialogData.itemInfo.content" placeholder="售后内容"></el-input>
            </el-form-item>
            <el-form-item label="异议凭证">
              <section class="file-upload-box">
                <UploadImgs
                  v-model:fileList="dialogData.fileList"
                  :file-size="3"
                  width="160px"
                  height="160px"
                  :api="uploadImg"
                >
                  <template #tip> 不超过 3M </template>
                </UploadImgs>
              </section>
            </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="dialogVisible = false">关闭</el-button>
        <el-button size="large" type="primary" @click="handleSubmit" :loading="btnLoading">
        确认提交
      </el-button>
      </template>
    </el-dialog>
  </template>
  <script setup lang="ts">
  import { ref, reactive, onMounted } from "vue";
  import { getOptTitle, OptEnum } from "@/biz/eenum/appEnum";
  import { DialogParam } from "@/biz/interface/DialogType";
  import { AbnormalEntity } from "@/biz/interface/modules/AbnormalType";
  import { ElMessage, FormInstance } from "element-plus";
  import UploadImgs from "@/components/Upload/ImgMultiple.vue";
  import { uploadImg } from "@/api/modules/upload";
  import {getFlexjobAbnormalTypesApi, saveFlexjobAbnormalApi} from "@/api/modules/cpyjob/abnormal"
  //页面的数据
  interface flexjobAbnormalDialogOption extends DialogParam {
    //弹出表单的标题
    title: string;
    abnormalTypes:[];
    //当前的数据对象
    itemInfo: AbnormalEntity;
    //其它的数据都继续在这里加
  }
  //提交按钮，避免多次提交
  const btnLoading = ref(false);
  //弹出框的参数
  const dialogVisible = ref(false);
  //当前表单数据在这里初始化
  const dialogData = reactive<flexjobAbnormalDialogOption>({
    optType: OptEnum.UNKNOW,
    title: "",
    abnormalTypes:[],
    itemInfo: {}
  });
  
  // 接收父组件传过来的参数
  const acceptParams = (params: DialogParam): void => {
    dialogData.optType = params.optType;
    dialogData.rowData = params.rowData;
    dialogData.title = getOptTitle(dialogData.optType);
  
    if (dialogData.rowData) {
      initItemInfo();
      // getItemInfo(dialogData.rowData.id);
      dialogData.itemInfo.id = dialogData.rowData.id;
    }
  
    dialogVisible.value = true;
  };
  
  //初始化页面的数据
  const initItemInfo = (): void => {
    dialogData.itemInfo = { };
  };
  
  // //获取当前数据的详情，直接调用接口获取数据
  // const getItemInfo = async (id: string) => {
  //   if (id) {
  //     let { data } = await getAbnormalInfoApi({ jobId:id });
  //     dialogData.itemInfo = data as unknown as AbnormalEntity;
  //   }
  // };
  
  //数据较验
  const rules = reactive({
    title: [{ required: true, message: "异议标题不能为空", trigger: "blur" }],
    content: [{ required: true, message: "异议内容不能为空", trigger: "blur" }]
  });
  

// 提交数据（新增/编辑）
const jobFormRef = ref<FormInstance>();
const handleSubmit = () => {
  btnLoading.value = true;
  jobFormRef.value!.validate(async valid => {
    if (!valid) {
      btnLoading.value = false;
      return;
    }
    try {
      if (dialogData.optType === OptEnum.CREATE || dialogData.optType === OptEnum.EDIT) {
        if (dialogData.fileList) {
          dialogData.itemInfo.reses = [];
          dialogData.fileList.forEach(file => {
            // console.log("每个文件, ", file, file.url);
            if (file && file.url) {
              dialogData.itemInfo.reses.push(file.url);
            }
          });
        }

        //提交数据
        // console.log("提交的数据", dialogData.itemInfo, dynamicTags.value);
        let res = await saveFlexjobAbnormalApi({
          ...dialogData.itemInfo
        });
        if (res.data) {
          ElMessage.success({ message: `${dialogData.title},保存成功！` });
          //刷新列表数据
          emits("refresh-list");
          dialogVisible.value = false;
        }
      }
    } catch (error) {
      console.log("出现异常情况,", error);
    } finally {
      btnLoading.value = false;
    }
  });
};

//页面事件
const emits = defineEmits(["refresh-list"]);

onMounted(async () => {
  // 获取零工岗位相关的类型
  getFlexjobAbnormalTypesApi().then(res => {
    dialogData.abnormalTypes = res.data?.map(item => {
        return { value: item.configKey, label: item.configValue };
      });
  });
});

  //页面参数
  defineExpose({
    acceptParams
  });
  </script>
  <style scoped lang="scss"></style>
  